main {
	margin: 0.8rem;
	margin-top: 0;
	max-width: min(70rem, calc(100vw - 0.8rem * 2));
}

main h1 {
	margin-top: 0;
	margin-bottom: 0;
}

ul.card-list {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	gap: 0.4rem;
	align-items: center;
}

.card {
	border-radius: 0.4rem;
	background: var(--color-accent0);
	padding: 0.8rem;
	text-decoration: none;
	color: var(--color-text);
	transition: background .4s;
	width: 100%;
}
.card:hover {
	background: var(--color-accent1);
}
.card article {
	display: flex;
	flex-direction: column;
}
.card article h2 {
	padding: 0;
	margin: 0;
}
.card article p {
	padding: 0;
	margin: 0;
	margin-top: 0.4rem;
}

/* TABLE OF CONTENTS */
aside.toc {
	position: fixed;
	bottom: 0;
	right: 0;
	margin: 0.4rem;
	z-index: 200;
	display: flex;
}
aside.toc details {
	transform: scaleX(-1) scaleY(-1);
}
aside.toc details summary {
	--size: 1rem;
	list-style: none;
	transform: scaleX(-1) scaleY(-1);
	width: var(--size);
	height: var(--size);
	background: var(--color-accent0);
	border-radius: 0.4rem;
	padding: 0.4rem;
	position: relative;
	filter: saturate(60%);
	transition: filter .2s, background .2s;
}
aside.toc details summary:hover {
	filter: saturate(100%);
}
aside.toc details[open] summary {
	background: var(--color-accent2);
	filter: saturate(100%);
}
aside.toc details[open] summary:hover {
	filter: saturate(120%);
}
aside.toc details summary::after {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	content: "";
	width: var(--size);
	height: var(--size);
	background: var(--color-text);
	mask-image: var(--menu-icon);
	mask-size: cover;
}
aside.toc details nav {
	transform: scaleX(-1) scaleY(-1);
	border: 1px solid var(--color-accent1);
	box-shadow: 0px 0px 2px var(--color-accent2);
	background: var(--color-accent0);
	border-radius: 0.4rem;
	padding: 0.4rem;
	/* changes the bottom padding because it is flipped */
	margin-top: 0.2rem;
}
aside.toc details nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
aside.toc details nav ul li a {
	border-left: 2px solid transparent;
	padding-left: 0.2rem;
	color: var(--color-text);
	text-decoration: none;
	opacity: 0.9;
	transition: opacity .2s, border-left .2s;
}
aside.toc details nav ul li a:hover {
	border-left: 2px solid var(--color-text);
	opacity: 1;
}
aside.toc details nav ul ul li a {
	/* ident level 3 headlines but keep border inline with parent  */
	padding-left: calc(0.6rem + 0.2rem);
	opacity: 0.8;
}

/* back link */
nav.breadcrumb {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-left: 0.8rem;
}
nav.breadcrumb ol {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	list-style: none;
	align-items: center;
	margin-left: 0;
	padding-left: 0;
}
nav.breadcrumb ol li {
	display: flex;
	flex-direction: row;
	align-items: center;
}
nav.breadcrumb ol li a {
	color: var(--color-text);
	transition: .4s color;
	text-decoration: none;
}
nav.breadcrumb ol li:hover a {
	color: var(--color-headline);
	text-decoration: underline;
}
nav.breadcrumb ol li:first-child a {
	width: 1rem;
	height: 1rem;
	display: inline-block;
	background: var(--color-text);
	mask-size: cover;
	mask-image: var(--home-icon);
	transition: .4s background;
}
nav.breadcrumb ol li:first-child:hover a {
	background: var(--color-headline);
}
nav.breadcrumb ol li:not(:last-child)::after {
	width: 1rem;
	height: 1rem;
	background: var(--color-text);
	content: "";
	display: inline-block;
	mask-size: cover;
	mask-image: var(--chevron-right-icon);
	opacity: 0.4;
}

/* Campaign level quicklaunch buttons */

.campaign-quicklaunch {
	margin: 0.4rem;
	padding: 0.4rem;
	background: var(--color-accent1);
	border-radius: 0.4rem;
	width: fit-content;
}

.campaign-quicklaunch form {
	width: fit-content;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.2rem;
}

.campaign-quicklaunch select,
.campaign-quicklaunch input {
	border-radius: 0.4rem;
	border: 2px solid var(--color-text);
	color: var(--color-text);
	background: transparent;
	padding: 0.2rem 0.4rem;
	outline: none;
}
.campaign-quicklaunch select:hover,
.campaign-quicklaunch input[type="submit"]:hover {
	background: var(--color-text);
	color: var(--color-bg);
}

table {
    background: var(--color-accent0);
    margin: 0.4rem;
    overflow-x: auto;
    max-width: calc(100% - 2 * 0.4rem);
    width: 100%;
    border-collapse: collapse;
    border-radius: 0.4rem;
    position: relative;
}

table * {
    border: none
}

table td {
    text-align: center;
}

table thead th {
    padding: 0.2rem;
    background-color: var(--color-accent2);
}

table thead th:first-child {
    border-top-left-radius: 0.4rem;
}

table thead th:last-child {
    border-top-right-radius: 0.4rem;
}

table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 0.4rem;
}

table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 0.4rem;
}

table tbody tr {
    filter: sepia(0%);
    transition: filter .2s;
}

table tbody tr td {
    background: var(--color-accent1);
}

table tbody tr:nth-child(odd) td {
    background: var(--color-accent0);
}

table tbody tr:hover {
    filter: sepia(20%);
}